

import React, { useState, useRef } from 'react';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Popconfirm } from 'antd';
import ProTable from '@ant-design/pro-table';
import { list, del as deleted } from '@/services/tag/api'

const del = (record, action) => {
  deleted({ id: record.id }).then(result => {
    action.reload()
  })
}

const columns = [
  {
    title: '标签名称',
    dataIndex: 'name'
  },
  {
    title: '用户数量',
    dataIndex: 'money',
    filters: true,
    onFilter: true,
  },
  {
    title: '创建时间',
    key: 'since',
    dataIndex: 'created_at'
  },
  {
    title: '操作',
    key: 'option',
    valueType: 'option',
    render: (text, record, index, action) => [
      <a key="link">编辑</a>,
      <Popconfirm title="Are you sure？" okText="Yes" cancelText="No" onConfirm={() => del(record, action)}>
        <Button type="link" danger>
          删除
        </Button>
      </Popconfirm>
    ],
  },
];

const Tag = () => {
  const myRef = useRef();
  const [activekey, setActiveKey] = useState('0');
  
  return (
    <PageContainer>
      <ProTable
        search={false}
        actionRef={myRef}
        columns={columns}
        request={async (
          params,
          sort,
          filter,
        ) => {
          const msg = await list({
            page: params.current,
            pageSize: params.pageSize,
            type: activekey
          })
          return {
            data: msg.data.content,
            success: true,
            total: msg.data.total_elements,
          }
        }}
        pagination={{
          defaultPageSize: 10,
          showQuickJumper: true,
        }}
        // search={{
        //   layout: 'vertical',
        //   defaultCollapsed: true,
        // }}
        toolbar={{
          menu: {
            type: 'tab',
            activeKey: activekey,
            items: [
              {
                key: '0',
                label: <span>手动标签</span>,
              },
              {
                key: '1',
                label: <span>自动标签</span>,
              }
            ],
            onChange: (key) => {
              setActiveKey(key);
              myRef.current.reload();
            },
          },
          actions: [
            <Button key="primary" type="primary" onClick={(event) => history.push('/member/tag/add')}>
              添加标签
            </Button>,
          ],
        }}
        dateFormatter="string"
        options={{
          search: true,
        }}
      />
    </PageContainer>
  );
};
export default Tag;
